<template>
  <div :class="{'login-header':true,'is-login-home':isLoginHome}">
    <div class="inner-login-header">
        <h2>
<!--          <router-link to="/">-->
<!--            <img :src="siteInfo.logo" alt="" style="margin-right: 15px;">-->
<!--            <svg id="logo-svg" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 100" height="26px">-->
<!--              <polygon points="220.25 84.82 235.23 23.81 251.87 23.81 236.89 84.82 220.25 84.82"/>-->
<!--              <polygon points="276.32 14.56 275.41 18.26 304.99 18.26 289.56 81.12 276.62 81.12 275.71 84.82 288.65 84.82 300.7 84.82 306.56 79.64 321.63 18.26 322.54 14.56 276.32 14.56"/>-->
<!--              <polygon points="493.5 19.26 531.26 19.26 532.17 15.56 447.32 15.56 446.41 19.26 476 19.26 440.3 37.56 443.22 41.26 463 41.26 436.37 53.56 439.69 57.26 471.82 57.26 467.19 81.12 453.83 81.12 452.93 84.82 466.29 84.82 478.26 84.82 484.13 79.89 488.46 57.26 516.85 57.26 521.37 53.56 521.32 53.56 514.79 39.64 498.15 39.64 504.68 53.56 453.01 53.56 502 30.64 486 30.64 471.01 37.56 457.8 37.56 493.5 19.26"/>-->
<!--              <polygon points="429.93 84.82 437.59 84.82 446.08 79.67 454.59 65.82 441.59 65.82 429.93 84.82"/>-->
<!--              <polygon points="499.59 65.82 501.29 79.61 507.26 84.82 514.93 84.82 512.59 65.82 499.59 65.82"/>-->
<!--              <polygon points="534.93 84.82 563.93 84.82 564.83 81.12 535.83 81.12 534.93 84.82"/>-->
<!--              <polygon points="613.67 53.26 617.09 53.26 620.42 55.64 628.31 55.64 626.53 36.64 615.53 36.64 616.74 49.56 586.61 49.56 601.97 25.26 635.54 25.26 636.45 21.56 614.45 21.56 612.15 14.64 597.15 14.64 599.45 21.56 581.45 21.56 580.54 25.26 587.97 25.26 572.61 49.56 572.58 49.56 576.09 53.26 580.67 53.26 568.93 84.82 576.37 84.82 582.2 79.64 592.67 53.26 602.67 53.26 594.2 79.64 597.93 84.82 603.93 84.82 631.93 84.82 632.83 81.12 604.83 81.12 613.67 53.26"/>-->
<!--              <polygon points="574.77 40.64 563.77 40.64 561.97 42.64 560.28 42.64 580.91 15.64 566.91 15.64 546.28 42.64 549.21 46.64 558.37 46.64 540.39 66.64 543.31 70.64 567.4 70.64 568.39 66.64 551.39 66.64 574.77 40.64"/>-->
<!--              <polygon points="256.95 28.63 253.92 14.64 269.29 14.64 272.33 28.63 256.95 28.63"/>-->
<!--              <path d="M391.83,21.56l-2.3-6.92H374.15l2.3,6.92H345.6l-.91,3.7-11,45-8.53,14.38h11.4l8.19-5,5.35-9h.13l3-12.38h55.21l9.92-7.79,6.18-25.21.91-3.7Zm8.88,33H354.14l7.19-29.3h46.58Z"/>-->
<!--              <polygon points="206.82 55.24 207.72 51.54 188.24 51.54 193.93 28.35 213.41 28.35 214.32 24.66 207.05 24.66 213.17 14.56 201.01 14.56 194.89 24.66 185.76 24.66 184.43 14.56 172.08 14.56 173.41 24.66 166.25 24.66 165.35 28.35 180.99 28.35 175.29 51.54 159.66 51.54 158.75 55.24 172.92 55.24 152.59 84.82 160.59 84.82 169.09 79.65 185.86 55.24 206.82 55.24"/>-->
<!--              <polygon points="196.06 63.64 183.12 63.64 186.51 79.64 192.93 84.82 200.55 84.82 196.06 63.64"/>-->
<!--              <path d="M156.41,49.69l3.18-12.94.91-3.7,3.63-14.79h3.7l.9-3.7h-37l-.91,3.7h3.7l-3.63,14.79-.91,3.7-3.18,12.94-.9,3.7-2.27,9.24H120l-.91,3.7h22.19L136.7,84.82h11.09l4.54-18.49H156l.9-3.7h-3.69l2.27-9.24ZM145.64,18.26H153l-3.63,14.79H142ZM141.1,36.75h7.4l-2.74,11.13-.44,1.81h-7.39l.41-1.7Zm1,25.88h-7.39L137,53.39h7.39Z"/>-->
<!--              <path d="M111.3,18.26l.91-3.7H30.87L30,18.26H50.51L25.75,55.64l1.87,8H72.87L63,81.12H14.53l-.91,3.7H95l.91-3.7H79.61l23-40.65-4.33-6.83H57L67.15,18.26ZM87.76,37.34,75,59.93H39.55l15-22.59Z"/>-->
<!--            </svg>-->
<!--          </router-link>-->
          <span class="site-name" v-if="!isLoginHome">{{ siteInfo.site_name }}</span>
          <span class="model-text" v-if="headMsg !== ''">{{headMsg}}</span>
        </h2>
        <el-button plain @click="returnLogin" v-if="!isLoginHome">返回登录页面</el-button>
    </div>
  </div>
</template>

<script setup>
/* eslint-disable */
  import { watch, ref, toRefs } from 'vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()
  const headMsg = ref('')
  const isLoginHome = ref(router.currentRoute.value.path === '/login/index' ?  true :  false )
  const { userInfo, QRcode, siteInfo } = toRefs(siteDevConfig)

  //站点信息
  router.currentRoute.value.meta.headMsg ? headMsg.value = router.currentRoute.value.meta.headMsg : headMsg.value = ''
  watch(() => router.currentRoute.value,(newValue) => {
    newValue.meta.headMsg ? headMsg.value = newValue.meta.headMsg : headMsg.value = ''
    newValue.path === '/login/index' ? isLoginHome.value = true : isLoginHome.value = false
  })
  const returnLogin = () => {
    router.push({path: '/login'})
  }
</script>

<style scoped lang="scss">
  .login-header{
    height: 60px;
    padding: 0 96px;
    background-color: $white;
    border-bottom: 1px solid $weightBar;
    position: relative;
    z-index: 2;
    &.is-login-home{
      background: transparent;
      border-bottom: none;
      .inner-login-header{
        h2{
          span.site-name{
            color: $white;
          }
          span.model-text{
            color: $white;
          }
        }
      }
    }
    .inner-login-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      min-width: 1200px;
      h2{
        display: flex;
        align-items: center;
        @include sysText;
        img{height: 40px;width: auto;vertical-align: middle;}
        #logo-svg{
          fill: $mainColor;
          margin-right: 15px;
          display: inline-block;
          vertical-align: middle;
          line-height: 26px;
        }
        span.site-name{color: $black;line-height: 26px;}
        span.model-text{
          color: $black;
          font-size: 20px;font-weight: normal;padding-left: 10px;margin-left: 10px;
          position: relative;
          &:before{
            content: '';
            height: 100%;width: 2px;
            background-color: $borderColor;
            display: inline-block;
            position: absolute;
            left: 0;top: 0;
          }
        }
      }
    }
  }
</style>
